let data = []
let teamName = ''
const requestTeamDate = () => {
  axios.post(
    "../../php/getGameData.php",
    {
      teamName
    },
    {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      }
    }
  ).then(result => {
    data = result.data.data
    console.log(result.data)
  }).catch(error => {
    console.log(error)
  })
}

//刷新队伍信息
const reRenderPlayer = () => {
  // 使用 table.reload 更新表格数据
  layui.use('table', function () {
    var table = layui.table
    table.reloadData('table_user', {
      data
    })
  })
}

//查看某场比赛详情
const showDetails = (gameId) => {
  layui.use(function () {
    var layer = layui.layer
    var util = layui.util
    var $ = layui.$
    layer.open({
      type: 2,
      title: ['查看比赛', 'font-size:24px;font-weight:bold;'],
      area: ['1200px', '600px'],
      content: `../../content/game/gameDetail.php?gameId=${gameId}`,
    })
  })
}

//删除比赛
const delGame = (gameId) => {
  layui.use(['layer'], function () {
    var layer = layui.layer
    layer.confirm('确定要删除比赛吗？', {
      icon: 3,    // 图标
      title: '删除比赛',  // 标题
      btn: ['确定', '取消'],  // 按钮
    }, function (index) {  // 确定按钮的回调函数
      // 执行删除操作
      axios.get('../../php/delGame.php', {
        params: {
          gameId
        }
      }).then(res => {
        // console.log(res.data)
        layui.use('layer', function () {
          var layer = layui.layer
          if (res.data.status) {
            layer.msg('删除成功')
            setTimeout(() => {
              window.location.reload()
            }, 1500)
          }
          else {
            layer.msg('删除失败，请检查外键约束')
          }
        })
      })
    }, function (index) {  // 取消按钮的回调函数
      layer.close(index)  // 关闭弹出层
    })
  })

}

//编辑比赛信息
const updateGame = (gameId) => {
  layer.open({
    // type: 2,
    type: 2,
    title: ['修改比赛信息', 'font-size:24px;font-weight:bold;'],
    area: ['1000px', '500px'],
    content: `../../content/game/updateGame.php?gameId=${gameId}`,
    maxmin: true,
  })
}

//添加进球事件
const addEvent = (gameId) => {
  layer.open({
    // type: 2,
    type: 2,
    title: ['添加进球事件', 'font-size:24px;font-weight:bold;'],
    area: ['600px', '500px'],
    content: `../../content/game/addEvent.php?gameId=${gameId}`,
    maxmin: true,
  })
}


const renderTable = () => {
  //显示数组中的元素
  layui.use(['table'], function () {
    table = layui.table
    table.render({
      elem: '#table_user',
      height: 600,
      data: data,
      title: '球队表',
      page: true, //开启分页
      // totalRow: true, // 开启合计行
      toolbar: '#toolbarDemo',
      autoSort: true,
      skin: 'grid',
      limit: 8, //设置每页显示条数,根据自己项目情况去设置
      limits: [8, 10, 20, 30, 50], //设置每页条数下拉框的选择项,就是分页那一栏的下拉框选项  
      cols: [
        [ //表头
          {
            type: 'checkbox',
            fixed: 'left'
          },
          {
            field: 'gameId',
            fixed: 'left',
            title: '比赛Id',
            align: 'center',
            width: 120,
            style: 'background-color: #eee;',
            sort: true,
            // type: 'numbers'
          },
          {
            field: 'group',
            title: '小组',
            align: 'center',
            width: 140,
            style: 'font-weight:bold;',
            templet: (d) => {
              let res = ''
              switch (d.group) {
                case 'A': {
                  res = `<span style="color:#FF5733;">${d.group}</span>`
                  break
                }
                case 'B': {
                  res = `<span style="color:#FFC300;">${d.group}</span>`
                  break
                }
                case 'C': {
                  res = `<span style="color:#9B33FF;">${d.group}</span>`
                  break
                }
                case 'D': {
                  res = `<span style="color:#33FF57;">${d.group}</span>`
                  break
                }
                case 'E': {
                  res = `<span style="color:#FFD700;">${d.group}</span>`
                  break
                }
                case 'F': {
                  res = `<span style="color:#3399FF;">${d.group}</span>`
                  break
                }
                case 'G': {
                  res = `<span style="color:#FF33E9;">${d.group}</span>`
                  break
                }
                case 'H': {
                  res = `<span style="color:#33FFE3;">${d.group}</span>`
                  break
                }
                default: break
              }
              return res
            },
          },
          {
            field: 't1',
            title: '主队名',
            align: 'center',
            width: 140,
            style: 'font-weight:bold;',
          }, {
            field: 't2',
            title: '客队名',
            width: 140,
            align: 'center',
            style: 'font-weight:bold;',
          }, {
            field: 'hScore',
            title: '主队得分',
            align: 'center',
            width: 140,
          }, {
            field: 'gScore',
            title: '客队得分',
            width: 140,
            align: 'center',
          }, {
            field: 'type',
            title: '比赛类型',
            width: 140,
            align: 'center',
            templet: (d) => {
              res = ''
              if (d.type == 1) {
                res = '<span>小组赛</span>'
              }
              else {
                res = '<span>淘汰赛</span>'
              }
              return res
            }
          }, {
            field: 'begin',
            title: '开始时间',
            width: 220,
            align: 'center',
          }, {
            field: 'end',
            title: '结束时间',
            width: 220,
            align: 'center',
          }, {
            field: 'logo',
            title: '比赛标志',
            width: 140,
            align: 'center',
            templet: (d) => {
              res = ''
              if (d.logo == 1) {
                res = '<span>未开始</span>'
              }
              else {
                res = '<span>已结束</span>'
              }
              return res
            }
          },
          {
            fixed: "right",
            title: '操作',
            width: 260,
            align: 'center',
            templet: (d) => {
              let res = ''
              if (d.logo==1){
                return `
                <a class="layui-btn layui-btn-warm layui-btn-xs " lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>添加事件</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">
                <i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                <i class="layui-icon layui-icon-delete"></i>删除</a>
              `
              }
              else{
                return `
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">
                <i class="layui-icon layui-icon-eye"></i>查看</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                <i class="layui-icon layui-icon-delete"></i>删除</a>
              `
              }          
            }
          }
        ]
      ],
      size: 'lg'
    })
    table.on('toolbar(test)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id)
      switch (obj.event) {
        case 'getCheckData':
          var data = checkStatus.data
          layer.alert(JSON.stringify(data))
          break
        case 'getCheckLength':
          var data = checkStatus.data
          layer.msg('选中了：' + data.length + ' 个')
          break
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选' : '未全选')
          break

        //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮')
          break
      };
    })

    //监听行工具事件
    table.on('tool(test)', function (obj) {
      //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
        ,
        layEvent = obj.event //获得 lay-event 对应的值

      if (layEvent === 'detail') {
        showDetails(data.gameId)
      } else if (layEvent === 'del') {
        delGame(data.gameId)
      } else if (layEvent === 'edit') {
        updateGame(data.gameId)
      } else if (layEvent === 'add') {
        addEvent(data.gameId)
      }
    })
  })
}

const query = document.querySelector('[name="gamequery"]')
const search = document.querySelector('[name="search"]')
search.addEventListener('click', (e) => {
  // console.log(query.value)
  teamName = query.value
  axios.post(
    "../../php/getGameData.php",
    {
      teamName
    },
    {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      }
    }
  ).then(result => {
    data = result.data.data
    console.log(result.data)
    reRenderPlayer()
  }).catch(error => {
    console.log(error)
  })
  renderTable()
})

requestTeamDate()
renderTable()

layui.use(function () {
  var layer = layui.layer
  var util = layui.util
  var $ = layui.$

  $("#addGame").click(() => {
    layer.open({
      // type: 2,
      type: 2,
      title: ['添加比赛', 'font-size:24px;font-weight:bold;'],
      area: ['600px', '600px'],
      content: '../../content/game/addGame.php',
      maxmin: true,
    })
  }),
    $("#refresh").click(() => {
      // console.log(11)
      window.location.reload()
    })
})




